<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        *{padding: 0;margin: 0;}
        .count-input{
            display: flex;
            width: fit-content;
            border-radius: 4px;
            overflow: hidden;
        }

        .count-input .reduce,
        .count-input .add{
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: grey;
            color: #fff;
        }
        .count-input .count{
            width: 100px;
            border: 0;
            outline: none;
            text-align: center;
            background-color: #f1f1f1;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
        }

        input[type='number'] {
            -moz-appearance: textfield;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>{{count}}</p>
        <p><button @click="count++">count++</button></p>
        <br>
        <br>
        <br>
        <!--  组件通信 子传父  -->
        <!-- 1. 父组件给子组件动态传递数据以及修改数据的方法(通过自定义事件传入) -->
        <!-- 2. 自定义事件的名称可以自己定义  传入的函数被子组件接收(函数也是引用类型 -> 子组件触发自定义事件 -> 执行父组件传入的函数) -->
        <!-- <count-input :value="count" @update:value="updateValueHandler"></count-input> -->

        <!-- .sync修饰符 等价于  对应绑定的参数名 新增自定义事件 @update:参数名="(v)=>{count=v}"  -->
        <count-input v-bind:value.sync="count"  @aaaa.sync="()=>{}"   :a.sync="A" :b.sync="B"  ></count-input>
    </div>
</body>
<template id="countInput">
    <div class="count-input">
        <span class="reduce" @click="value>1&&$emit('update:value',value-1)">-</span>
        <input type="number" class="count" :value="value" @change="changeHandler">
        <span class="add" @click="$emit('update:value',value+1)">+</span>
    </div>
</template>
<script>

    // 组件通信 子传父  
    Vue.component("count-input",{
        props:{
            value:{
                type:[String,Number],
                required:true,
            }
        },
        data(){
            return {
              
            }
        },
        template:`#countInput`,
        methods:{
            changeHandler(e){
                var val = e.target.value; //输入框修改后的值
                console.log(val);
                if(val < 0 || val%1!=0){ // 如果手动输入的内容 不和规范 => 赋值为原值  -> 数据没有更新 -> 不会触发视图更新
                    this.$emit('update:value',this.value);  // 赋值为原值 不会触发视图更新
                    this.$forceUpdate();  //强制视图更新
                }else{  // 合乎规范 -> 更新数据
                    this.$emit('update:value',val);
                }
            }
        },
        mounted() {
            console.log("组件实例",this);

            // 组件挂载完毕 => 手动触发测试
            // this.$emit("update:value",10)

        },
    })

    var vm = new Vue({
        el:"#app",
        data:{
            count:1,
            A:1,
            B:2,
        },
        methods: {
           
        },
    })
    // console.log(vm);

    




</script>
</html>